<template>
  <j-modal :title="title" :width="400" :visible="visible" switchFullscreen @cancel="handleCancel" :footer="null">
    <a-spin :spinning="loading">
      <a-form-model :model="form" ref="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-model-item label="上级目录" prop="seniorIndicatorName">
          <a-input :value="form.seniorIndicatorName" readOnly></a-input>
        </a-form-model-item>
        <a-form-model-item label="目录名称" prop="name">
          <a-input v-model="form.name" :placeholder="compPlaceholderInput" :readOnly="isDisabled"></a-input>
        </a-form-model-item>
        <a-form-model-item label="顺序" prop="sort">
          <a-input v-model="form.sort" :placeholder="compPlaceholderInput" :readOnly="isDisabled"></a-input>
        </a-form-model-item>
      </a-form-model>
      <div class="footerBox" v-if="!isDisabled">
        <a-button class="btn" @click="handleCancel">取 消</a-button>
        <a-button class="btn" @click="handleOk" style="margin-left: 8px" type="primary">保 存</a-button>
      </div>
    </a-spin>
  </j-modal>
</template>

<script>
import Api from '@/api/sjsk/performanceService'

export default {
  name: 'AddDir',
  components: {},
  data() {
    return {
      visible: false,
      loading: false,
      title: null,
      form: {},
      rules: {
        name: [{ required: true, message: '请输入目录名称' }],
      },
      showType: null,
      isDisabled: false,
      isEdit: false,
    }
  },
  computed: {
    compPlaceholderInput() {
      return this.showType !== '3' ? '请输入' : ''
    },
  },
  created() {},
  mounted() {},

  methods: {
    show(_type, _row = {}) {
      this.form = {}
      this.isEdit = false
      if (_type === '1') {
        this.title = '新增目录'
        if (_row.id) {
          this.form.seniorIndicatorName = _row.indicatorName
          this.form.id = _row.id
        }
        console.log(this.form);
      } else if (_type === '2') {
        this.title = '编辑目录'
        this.isEdit = true
        this.getDetails(_row.id)
      } else if (_type === '3') {
        this.title = '目录详情'
        this.getDetails(_row.id)
      }
      this.showType = _type
      this.isDisabled = _type === '3'
      this.visible = true
    },

    // 获取目录详情
    async getDetails(_id) {
      this.loading = true
      await Api.getIndicatorDetails(_id)
        .then((res) => {
          if (res.success) {
            this.form = {
              ...res.result,
              name: res.result.indicatorName,
            }
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 保存
    handleOk() {
      const that = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.loading = true
          const methodApi = this.isEdit ? 'updateCatalogue' : 'addCatalogue'
          const { id, name, sort } = this.form
          Api[methodApi]({ id, name, sort })
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.error(res.message)
              }
            })
            .finally(() => {
              that.loading = false
              that.handleCancel()
            })
        } else {
          return false
        }
      })
    },

    handleCancel() {
      this.visible = false
    },
  },
}
</script>

<style lang="less" scoped>
.footerBox {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid #e8e8e8;
}
</style>
